import React, { useState, useRef, useEffect } from 'react'
import { View, Text, ScrollView, TouchableOpacity } from 'react-native'
import { OrderItem, TradItem, CustomerItem } from './components'
import { commonStyle } from 'styles'
import { NavigationStackScreenComponent } from 'react-navigation-stack'
import { fundListStyle } from './styles'
import posApi, { PosCustomer, PosAppFee, PosCustomerSeachor } from 'api/pos';
import { getAuthorization, operate } from 'services/authorization';
import Loading from 'components/loading'

/**
 * 收筹金
 * @param props
 */
const RecognitionListScreen: NavigationStackScreenComponent<{
	value: string,
	type: 'telphone' | 'idcard',
	onConfrim: () => void
}> = props => {

	// const [customerData, setCustomerData] = useState<PosCustomer>({})
	const [feeList, setFeeList] = useState<PosAppFee[]>([])
	const checkData = useRef<number[]>([])
	const [params, setParams] = useState<PosCustomerSeachor>();
	useEffect(() => {
		props.navigation.setParams({
			onConfrim: () => {

			}
		})
		let data: PosCustomerSeachor = { scene: 'scj', projectId: getAuthorization().project.id }
		let value = props.navigation.getParam('value')
		let type = props.navigation.getParam('type')
		if (type == 'idcard') {
			data.idNumber = value
		} else {
			data.tell = value
		}
		setParams(data)
	}, []);


	useEffect(() => {
		if (!params) return
		Loading.show();
		posApi.posApp
			.getFee(params)
			.then(res => {
				// res.customer && setCustomerData(res.customer)
				res.feeList && setFeeList(res.feeList)
			}).finally(() => { Loading.hide() })
	}, [params])

	return (
		<View style={fundListStyle.container}>
			{/* <CustomerItem data={customerData} /> */}
			<ScrollView>
				<View style={commonStyle.containerColumn}>
					{feeList ?.map((item: PosAppFee) => (
						<OrderItem
							key={item.id.toString()}
							data={item}
							onChange={(money, isCheck) => {
								item.money = money
								let data = checkData.current
								if (item.id && !isCheck) {
									data = checkData.current.filter(checkId => checkId != item.id)
								}
								data.push(item.id)
								checkData.current = data
							}} />
					))}
				</View>
			</ScrollView>
		</View>
	)
}

RecognitionListScreen.navigationOptions = props => {
	return {
		title: '选择筹单',
		headerRight: (
			<TouchableOpacity
				style={commonStyle.headerRight}
				onPress={() => {
					operate()
					props.navigation.getParam('onConfrim')();
				}}>
				<Text style={commonStyle.headerFont}>确认</Text>
			</TouchableOpacity>
		),
	}
}

export default RecognitionListScreen
